<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  <!-- 表单提交：把表单中的数据提交到另一个地址  -->
  <!-- 实际开发中：点击按钮，用Ajax技术把数据提交给接口 -->



    <!-- 表单在以后的开发中，会经常用到 -->
  <!-- 表单 = <form>  表单项..... + 按钮  </form> -->

  <!-- action表示，要把数据提交到哪里去 -->
  <!-- action="https://www.baidu.com" -->
  <!-- action="./01-图书管理/index.html" -->
  <!-- action="" 表单把数据提交到当前页面 -->
  <form action="">
    <!-- 表单项，也叫做表单域；比如单行文本框，也可以说成单行文本域；比如文件选择框，也可以说成文件域 -->
    单行文本框：
    <input type="text" name="username"><br />
    密码框：
    <input type="password" name="pwd"><br />
    单项按钮组：
    <input type="radio" value="nan" name="sex">男
    <input type="radio" value="nv" name="sex">女<br />
    复选按钮组：
    <input type="checkbox" name="hobby" value="cf">吃饭
    <input type="checkbox" name="hobby" value="sj">睡觉
    <input type="checkbox" name="hobby" value="ddd">打豆豆<Br />
    下拉框：
    <select name="address">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
    </select><br />
    文件选择框：
    <input type="file"><br />
    多行文本框：
    <textarea name="intro" cols="30" rows="3"></textarea><br />
    隐藏域：
    <input type="hidden" name="id" value="100"><br />
    <!-- h5新增：
    <input type="color"> -->

    <!-- 表单中的按钮 -->
    <!-- 1.提交按钮（点击之后会造成表单提交） -->
    <button id="tijiao">提交按钮1</button>
    <button type="submit">提交按钮2</button>
    <input type="submit" value="提交按钮3">
    <hr>
    <!-- 2.普通按钮（点击之后不会有任何反应） -->
    <button type="button">普通按钮1</button>
    <input type="button" value="普通按钮2">
    <hr>
    <!-- 3.重置按钮(点击之后，会重置表单) -->
    <button type="reset">重置按钮1</button>
    <input type="reset" value="重置按钮2">
  </form>
</body>
<script>
   // 实际开发中，会用Ajax技术，把数据提交给接口
    // 因为使用 Ajax提交数据，页面不会整体刷新
    // 具体玩法：
    // 找到按钮，注册单击事件；阻止默认行为；获取表单各项的值；Ajax提交
    document.querySelector('#tijiao').addEventListener('click', function (e) {
      e.preventDefault() // 阻止默认行为
      // 获取表单中的值
      let username = document.querySelector('[name=username]').value
      let pwd = document.querySelector('[name=pwd]').value
      // 咨询狗哥。
      let sex = document.querySelector(':checked').value
      let addr = document.querySelector('[name=address]').value

      console.log(username, pwd, addr, sex)
      // Ajax提交
      // axios({})
    })


    // // 找到表单form，注册提交submit事件
    // document.querySelector('form').addEventListener('submit', function (e) {
    //   e.preventDefault()

    //   // 获取表单中的值
    //   let username = document.querySelector('[name=username]').value
    //   let pwd = document.querySelector('[name=pwd]').value
    //   // let sex = document.querySelector('[checked=true]').value
    //   let addr = document.querySelector('[name=address]').value

    //   console.log(username, pwd, addr)
    //   // Ajax提交
    //   // axios({})
    // })
</script>
</html>